<script setup lang="ts">
import { ref, watch } from "vue"
import { userDelAllByIdApi, userPageApi } from "@/api/user/user"
import UserInsert from "./userInsert.vue"
import { Delete, Search, Plus } from "@element-plus/icons-vue"
import { SysUser } from "@/api/user/type/user"
import { ElMessage } from "element-plus"
import UmCollapse from "@/components/Collapse/index.vue"
import Pagination from "@/components/Pagination/index.vue"

const users = ref()
const userInsertRef = ref()
const userPageRef = ref()
let userArray = [] as SysUser[]
const collapse = ref<boolean>(false)
const mode = ref<string>("all")
const total = ref<number>(0)
const pagination = ref({
  page: 1,
  size: 10
})

const initData = (page: number, size: number) => {
  pagination.value.page = page
  pagination.value.size = size
  userPageApi({
    page: pagination.value.page,
    size: pagination.value.size,
    mode: mode.value,
    body: {}
  }).then((res) => {
    const { body } = res
    users.value = body.content
    total.value = body.totalElements
  })
}

const showUser = (row: any) => {
  console.log(row)
}

const openInsertDialog = () => {
  userInsertRef.value.openDialog()
}

const saveAfter = () => {
  initData(pagination.value.page, pagination.value.size)
}

function selectUser(selection: SysUser[], row: SysUser) {
  console.log(selection, row)
  userArray = selection
}

const delHandler = () => {
  if (userArray.length > 0) {
    const userIds = userArray.map((user) => user.id)
    userDelAllByIdApi(userIds).then((res) => {
      const { code } = res
      if (code === 200) {
        ElMessage({
          type: "success",
          message: "删除成功"
        })
        initData(pagination.value.page, pagination.value.size)
      }
    })
  }
}

watch(mode, () => {
  initData(pagination.value.page, pagination.value.size)
})

initData(pagination.value.page, pagination.value.size)
</script>

<template>
  <div class="user-box">
    <div class="operation">
      <um-collapse :display="collapse">
        <template #head>
          <el-button :icon="Search" @click="collapse = !collapse" circle />
          <el-button type="primary" :icon="Plus" @click="openInsertDialog" circle />
          <el-button type="danger" :icon="Delete" @click="delHandler" circle />
        </template>
        <template #default>
          <el-radio-group v-model="mode">
            <el-radio label="all" value="all">全部</el-radio>
            <el-radio label="notDel" value="notDel">未删除</el-radio>
            <el-radio label="isDel" value="isDel">已删除</el-radio>
          </el-radio-group>
        </template>
      </um-collapse>
    </div>
    <div class="content">
      <el-table :data="users" @select-all="selectUser" @select="selectUser" border>
        <el-table-column type="selection" width="55" />
        <el-table-column fixed prop="username" label="用户名" width="150" />
        <el-table-column prop="nickname" label="昵称" width="150" />
        <el-table-column prop="phone" label="头像" width="150" />
        <el-table-column prop="intro" label="简介" width="300" />
        <el-table-column prop="salt" label="盐" width="300" />
        <el-table-column prop="roles" label="角色" width="150" />
        <el-table-column prop="del" label="状态" width="70" />
        <el-table-column fixed="right" label="操作" width="140">
          <template v-slot="scope">
            <el-button @click="showUser(scope.row)" size="small">查看</el-button>
            <el-button size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <Pagination :total="total" @handler="initData" ref="userPageRef" />
    </div>
    <UserInsert ref="userInsertRef" @saveAfter="saveAfter" />
  </div>
</template>

<style lang="scss" scoped>
.user-box {
  background-color: white;
  border-radius: 5px;

  .content {
    padding: 10px;
    :deep(.el-table) {
      .el-table-fixed-column--right {
        background-color: white;
      }
      .el-table-fixed-column--left {
        background-color: rgb(247, 250, 250);
      }
    }
  }
  .operation {
    padding: 10px;
    :deep(.el-row) {
      justify-content: end;
    }
  }
  .page {
    padding: 0 10px;
  }
}
</style>
